آموزش React - راهنمای کامل (از جمله Hooks، React Router و Redux) [ویدئو]

سرفصل ها و درس ها

شروع شدن Getting Started

• معرفی Introduction

• React چیست؟ What is React?

• SPAهای دنیای واقعی و برنامه های وب React Real-World SPAs & React Web Apps

• نوشتن اولین کد React ما Writing our First React Code

• چرا باید React را انتخاب کنیم؟ Why Should we Choose React?

• واکنش جایگزین React Alternatives

• آشنایی با کاربردهای تک صفحه ای و کاربردهای چند صفحه ای Understanding Single Page Applications and Multi Page Applications

• طرح کلی دوره Course Outline

تازه کردن نسل بعدی جاوا اسکریپت Refreshing Next Generation JavaScript

• معرفی ماژول Module Introduction

• درک "لذا" و "تقویت" Understanding "let" and "const"

• توابع پیکان Arrow Functions

• صادرات و واردات Exports and Imports

• درک کلاس ها Understanding Classes

• کلاس ها، ویژگی ها و روش ها Classes, Properties and Methods

• اپراتور Spread & Rest The Spread & Rest Operator

• در حال تخریب Destructuring

• Refresher انواع مرجع و اولیه Reference and Primitive Types Refresher

• تازه کردن توابع آرایه Refreshing Array Functions

• بسته شدن Wrap Up

درک ویژگی های پایه و نحو Understanding the Base Features & Syntax

• معرفی ماژول Module Introduction

• گردش کار ساخت The Build Workflow

• با استفاده از Create React App Using Create React App

• آشنایی با ساختار پوشه Understanding the Folder Structure

• درک مبانی کامپوننت Understanding Component Basics

• درک JSX Understanding JSX

• محدودیت های JSX JSX Restrictions

• ایجاد یک کامپوننت کاربردی Creating a Functional Component

• کار با کامپوننت ها و استفاده مجدد از آنها Working with Components & Re-Using Them

• خروجی محتوای پویا Outputting Dynamic Content

• کار با Props Working with Props

• درک مالکیت کودکان Understanding the Children Property

• درک و استفاده از حالت Understanding & Using State

• مدیریت رویدادها با روش ها Handling Events with Methods

• دستکاری دولت Manipulating the State

• استفاده از قلاب useState() برای دستکاری حالت Using the useState() Hook for State Manipulation

• بدون تابعیت در مقابل مولفه های دارای وضعیت Stateless vs Stateful Components

• ارجاعات روش عبور بین مؤلفه ها Passing Method References between Components

• افزودن دو طرفه صحافی Adding Two Way Binding

• اضافه کردن یک ظاهر طراحی با استایل شیت Adding Styling with Stylesheets

• کار با Inline Styles Working with Inline Styles

• تکلیف 1: زمان تمرین - نحو پایه Assignment 1: Time to Practice - The Base Syntax

• [اختیاری] راه حل تخصیص نحو پایه [OPTIONAL] Base Syntax Assignment Solution

کار با لیست ها و شرایط Working with Lists and Conditionals

• معرفی ماژول Module Introduction

• ارائه محتوا به صورت مشروط Rendering Content Conditionally

• مدیریت محتوای پویا "راه جاوا اسکریپت" Handling Dynamic Content "The JavaScript Way"

• لیست های خروجی (مقدمه) Outputting Lists (Intro)

• خروجی لیست ها Outputting Lists

• فهرست ها و ایالت Lists & State

• به روز رسانی وضعیت غیرقابل تغییر Updating State Immutably

• فهرست ها و کلیدها Lists & Keys

• لیست های انعطاف پذیر Flexible Lists

• بسته شدن Wrap Up

• تکلیف 2: زمان تمرین - فهرست ها و شرایط Assignment 2: Time to Practice - Lists and Conditions

• [اختیاری] راه حل تعیین فهرست ها و شرایط [OPTIONAL] Lists and Conditions Assignment Solution

Styling React Components & Elements Styling React Components & Elements

• معرفی ماژول Module Introduction

• معرفی ماژول Module Introduction

• تشریح مجموعه مشکلات Outlining the Problem Set

• تشریح مجموعه مشکلات Outlining the Problem Set

• تنظیم پویا سبک ها Setting Styles Dynamically

• تنظیم پویا سبک ها Setting Styles Dynamically

• تنظیم نام کلاس ها به صورت پویا Setting Class Names Dynamically

• تنظیم نام کلاس ها به صورت پویا Setting Class Names Dynamically

• اضافه کردن و استفاده از رادیوم Adding and Using Radium

• اضافه کردن و استفاده از رادیوم Adding and Using Radium

• استفاده از رادیوم برای پرسش های رسانه ای Using Radium for Media Queries

• استفاده از رادیوم برای پرسش های رسانه ای Using Radium for Media Queries

• معرفی Styled Components Introducing Styled Components

• معرفی Styled Components Introducing Styled Components

• بیشتر در مورد کامپوننت های سبک More on Styled Components

• بیشتر در مورد کامپوننت های سبک More on Styled Components

• اجزای سبک و سبک های پویا Styled Components & Dynamic Styles

• اجزای سبک و سبک های پویا Styled Components & Dynamic Styles

• کار با ماژول های CSS Working with CSS Modules

• کار با ماژول های CSS Working with CSS Modules

• ماژول‌های CSS و پرسش‌های رسانه CSS Modules & Media Queries

• ماژول‌های CSS و پرسش‌های رسانه CSS Modules & Media Queries

اشکال زدایی React Apps Debugging React Apps

اشکال زدایی React Apps Debugging React Apps

• معرفی ماژول Module Introduction

• معرفی ماژول Module Introduction

• درک پیام های خطا Understanding Error Messages

• درک پیام های خطا Understanding Error Messages

• یافتن خطاهای منطقی با استفاده از Dev Tools & Sourcemaps Finding Logical Errors by using Dev Tools & Sourcemaps

• یافتن خطاهای منطقی با استفاده از Dev Tools & Sourcemaps Finding Logical Errors by using Dev Tools & Sourcemaps

• کار با React Developer Tools Working with the React Developer Tools

• کار با React Developer Tools Working with the React Developer Tools

• استفاده از مرزهای خطا (React 16+) Using Error Boundaries (React 16+)

• استفاده از مرزهای خطا (React 16+) Using Error Boundaries (React 16+)

• بسته شدن Wrap Up

• بسته شدن Wrap Up

غواصی عمیق تر در اجزا و اجزای داخلی React Diving Deeper into Components & React Internals

غواصی عمیق تر در اجزا و اجزای داخلی React Diving Deeper into Components & React Internals

• معرفی ماژول Module Introduction

• معرفی ماژول Module Introduction

• ساختار پروژه بهتر A Better Project Structure

• ساختار پروژه بهتر A Better Project Structure

• تقسیم یک برنامه به کامپوننت Splitting an App into Components

• تقسیم یک برنامه به کامپوننت Splitting an App into Components

• مقایسه اجزای بدون تابعیت و دارای دولت Comparing Stateless and Stateful Components

• مقایسه اجزای بدون تابعیت و دارای دولت Comparing Stateless and Stateful Components

• مولفه های مبتنی بر کلاس در مقابل مولفه های عملکردی Class-based vs Functional Components

• مولفه های مبتنی بر کلاس در مقابل مولفه های عملکردی Class-based vs Functional Components

• بررسی اجمالی چرخه عمر مؤلفه کلاس class Component Lifecycle Overview

• بررسی اجمالی چرخه عمر مؤلفه کلاس class Component Lifecycle Overview

• چرخه حیات ایجاد مؤلفه در عمل Component Creation Lifecycle in Action

• چرخه حیات ایجاد مؤلفه در عمل Component Creation Lifecycle in Action

• چرخه عمر به‌روزرسانی مؤلفه (برای تغییرات پایه) Component Updating Lifecycle (for props Changes)

• چرخه عمر به‌روزرسانی مؤلفه (برای تغییرات پایه) Component Updating Lifecycle (for props Changes)

• چرخه عمر به‌روزرسانی مؤلفه (برای تغییرات وضعیت) Component Updating Lifecycle (for state Changes)

• چرخه عمر به‌روزرسانی مؤلفه (برای تغییرات وضعیت) Component Updating Lifecycle (for state Changes)

• استفاده از useEffect() در Functional Components Using useEffect() in Functional Components

• استفاده از useEffect() در Functional Components Using useEffect() in Functional Components

• کنترل رفتار useEffect() Controlling the useEffect() Behavior

• کنترل رفتار useEffect() Controlling the useEffect() Behavior

• پاکسازی با Lifecycle Hooks و useEffect() Cleaning up with Lifecycle Hooks & useEffect()

• پاکسازی با Lifecycle Hooks و useEffect() Cleaning up with Lifecycle Hooks & useEffect()

• Cleanup Work with useEffect() - مثال Cleanup Work with useEffect() - Ex

• Cleanup Work with useEffect() - مثال Cleanup Work with useEffect() - Ex

• استفاده از shouldComponentUpdate برای بهینه سازی Using shouldComponentUpdate for Optimization

• استفاده از shouldComponentUpdate برای بهینه سازی Using shouldComponentUpdate for Optimization

• بهینه سازی کامپوننت های کاربردی با React.memo() Optimizing Functional Components with React.memo()

• بهینه سازی کامپوننت های کاربردی با React.memo() Optimizing Functional Components with React.memo()

• چه زمانی باید بهینه سازی کرد؟ When should you optimize?

• چه زمانی باید بهینه سازی کرد؟ When should you optimize?

• PureComponents به جای shouldComponentUpdate PureComponents instead of shouldComponentUpdate

• PureComponents به جای shouldComponentUpdate PureComponents instead of shouldComponentUpdate

• How React DOM را به روز می کند How React Updates the DOM

• How React DOM را به روز می کند How React Updates the DOM

• رندر کردن عناصر JSX مجاور Rendering Adjacent JSX Elements

• رندر کردن عناصر JSX مجاور Rendering Adjacent JSX Elements

• با استفاده از React.Fragment Using React.Fragment

• با استفاده از React.Fragment Using React.Fragment

• مولفه های مرتبه بالاتر (HOC) - مقدمه Higher Order Components (HOC) - Introduction

• مولفه های مرتبه بالاتر (HOC) - مقدمه Higher Order Components (HOC) - Introduction

• شکل دیگری از HOCs Another Form of HOCs

• شکل دیگری از HOCs Another Form of HOCs

• عبور از قطعات ناشناخته Passing Unknown Props

• عبور از قطعات ناشناخته Passing Unknown Props

• تنظیم وضعیت به درستی Setting State Correctly

• تنظیم وضعیت به درستی Setting State Correctly

• با استفاده از PropTypes Using PropTypes

• با استفاده از PropTypes Using PropTypes

• با استفاده از Refs Using Refs

• با استفاده از Refs Using Refs

• Refs با React Hooks Refs with React Hooks

• Refs با React Hooks Refs with React Hooks

• درک مشکلات زنجیره پروپ Understanding Prop Chain Problems

• درک مشکلات زنجیره پروپ Understanding Prop Chain Problems

• با استفاده از Context API Using the Context API

• با استفاده از Context API Using the Context API

• contextType & useContext() contextType & useContext()

• contextType & useContext() contextType & useContext()

• بسته شدن Wrap Up

• بسته شدن Wrap Up

یک برنامه واقعی: برگر ساز (نسخه اصلی) A Real App: The Burger Builder (Basic Version)

یک برنامه واقعی: برگر ساز (نسخه اصلی) A Real App: The Burger Builder (Basic Version)

• معرفی ماژول Module Introduction

• معرفی ماژول Module Introduction

• برنامه ریزی یک برنامه در React - مراحل اصلی Planning an App in React - Core Steps

• برنامه ریزی یک برنامه در React - مراحل اصلی Planning an App in React - Core Steps

• برنامه ریزی برنامه ما - چیدمان و درخت اجزا Planning our App - Layout and Component Tree

• برنامه ریزی برنامه ما - چیدمان و درخت اجزا Planning our App - Layout and Component Tree

• برنامه ریزی دولت Planning the State

• برنامه ریزی دولت Planning the State

• راه اندازی پروژه Setting up the Project

• راه اندازی پروژه Setting up the Project

• ایجاد کامپوننت Layout Creating a Layout Component

• ایجاد کامپوننت Layout Creating a Layout Component

• شروع اجرای کانتینر برگر بیلدر Starting Implementation of the Burger Builder Container

• شروع اجرای کانتینر برگر بیلدر Starting Implementation of the Burger Builder Container

• اضافه کردن یک جزء پویا Adding a Dynamic Ingredient Component

• اضافه کردن یک جزء پویا Adding a Dynamic Ingredient Component

• افزودن اعتبارسنجی نوع Prop Adding Prop Type Validation

• افزودن اعتبارسنجی نوع Prop Adding Prop Type Validation

• راه اندازی مؤلفه برگر Starting the Burger Component

• راه اندازی مؤلفه برگر Starting the Burger Component

• خروجی پویا مواد برگر Outputting Burger Ingredients Dynamically

• خروجی پویا مواد برگر Outputting Burger Ingredients Dynamically

• محاسبه مجموع مواد به صورت پویا Calculating the Ingredient Sum Dynamically

• محاسبه مجموع مواد به صورت پویا Calculating the Ingredient Sum Dynamically

• اضافه کردن کامپوننت کنترل ساخت Adding the Build Control Component

• اضافه کردن کامپوننت کنترل ساخت Adding the Build Control Component

• خروجی چندین کنترل ساخت Outputting Multiple Build Controls

• خروجی چندین کنترل ساخت Outputting Multiple Build Controls

• اتصال دولت به کنترل‌های ساخت Connecting State to Build Controls

• اتصال دولت به کنترل‌های ساخت Connecting State to Build Controls

• حذف مواد با خیال راحت Removing Ingredients Safely

• حذف مواد با خیال راحت Removing Ingredients Safely

• نمایش و به روز رسانی قیمت برگر Displaying and Updating the Burger Price

• نمایش و به روز رسانی قیمت برگر Displaying and Updating the Burger Price

• اضافه کردن دکمه سفارش Adding the Order Button

• اضافه کردن دکمه سفارش Adding the Order Button

• ایجاد خلاصه سفارش Creating the Order Summary Modal

• ایجاد خلاصه سفارش Creating the Order Summary Modal

• نمایش و پنهان کردن مدال (با انیمیشن!) Showing & Hiding the Modal (with Animation!)

• نمایش و پنهان کردن مدال (با انیمیشن!) Showing & Hiding the Modal (with Animation!)

• پیاده سازی کامپوننت Backdrop Implementing the Backdrop Component

• پیاده سازی کامپوننت Backdrop Implementing the Backdrop Component

• اضافه کردن کامپوننت دکمه سفارشی Adding a Custom Button Component

• اضافه کردن کامپوننت دکمه سفارشی Adding a Custom Button Component

• پیاده سازی کامپوننت دکمه Implementing the Button Component

• پیاده سازی کامپوننت دکمه Implementing the Button Component

• اضافه کردن قیمت به خلاصه سفارش Adding the Price to the Order Summary

• اضافه کردن قیمت به خلاصه سفارش Adding the Price to the Order Summary

• اضافه کردن نوار ابزار Adding a Toolbar

• افزودن نوار ابزار Adding a Toolbar

• استفاده از لوگو در برنامه ما Using a Logo in our Application

• استفاده از لوگو در برنامه ما Using a Logo in our Application

• افزودن موارد ناوبری قابل استفاده مجدد Adding Reusable Navigation Items

• افزودن موارد ناوبری قابل استفاده مجدد Adding Reusable Navigation Items

• ایجاد یک سایدراور پاسخگو Creating a Responsive Sidedrawer

• ایجاد یک سایدراور پاسخگو Creating a Responsive Sidedrawer

• کار بر روی تنظیمات پاسخگو Working on Responsive Adjustments

• کار بر روی تنظیمات پاسخگو Working on Responsive Adjustments

• اطلاعات بیشتر در مورد تنظیمات پاسخگو More about Responsive Adjustments

• اطلاعات بیشتر در مورد تنظیمات پاسخگو More about Responsive Adjustments

• استفاده مجدد از پس زمینه Reusing the Backdrop

• استفاده مجدد از پس زمینه Reusing the Backdrop

• افزودن دکمه جابجایی Sidedrawer Adding a Sidedrawer Toggle Button

• افزودن دکمه جابجایی Sidedrawer Adding a Sidedrawer Toggle Button

• اضافه کردن نماد همبرگر Adding a Hamburger Icon

• اضافه کردن نماد همبرگر Adding a Hamburger Icon

• بهبود برنامه: مقدمه Improving the App: Introduction

• بهبود برنامه: مقدمه Improving the App: Introduction

• اعتبار سنجی نوع پایه Prop Type Validation

• اعتبار سنجی نوع پایه Prop Type Validation

• بهبود عملکرد Improving Performance

• بهبود عملکرد Improving Performance

• استفاده از روش‌های چرخه حیات اجزا Using Component Lifecycle Methods

• استفاده از روش‌های چرخه حیات اجزا Using Component Lifecycle Methods

• تغییر ساختار پوشه Changing the Folder Structure

• تغییر ساختار پوشه Changing the Folder Structure

• بسته شدن Wrap Up

• بسته شدن Wrap Up

دسترسی به وب (Http/Ajax) Reaching out to the Web (Http / Ajax)

دسترسی به وب (Http/Ajax) Reaching out to the Web (Http / Ajax)

• معرفی ماژول Module Introduction

• معرفی ماژول Module Introduction

• آشنایی با درخواست های Http در React Understanding Http Requests in React

• آشنایی با درخواست های Http در React Understanding Http Requests in React

• درک پروژه ما و معرفی Axios Understanding our Project and Introducing Axios

• درک پروژه ما و معرفی Axios Understanding our Project and Introducing Axios

• ایجاد درخواست Http برای دریافت داده Creating Http Request to GET Data

• ایجاد درخواست Http برای دریافت داده Creating Http Request to GET Data

• ارائه داده های واکشی شده روی صفحه Rendering Fetched Data to the Screen

• ارائه داده های واکشی شده روی صفحه Rendering Fetched Data to the Screen

• تبدیل داده ها Transforming Data

• تبدیل داده ها Transforming Data

• ایجاد پست قابل انتخاب Making a Post Selectable

• ایجاد پست قابل انتخاب Making a Post Selectable

• واکشی داده ها در به روز رسانی (بدون ایجاد حلقه های بی نهایت) Fetching Data on Update (without Creating Infinite Loops)

• واکشی داده ها در به روز رسانی (بدون ایجاد حلقه های بی نهایت) Fetching Data on Update (without Creating Infinite Loops)

• ارسال داده ها به سرور POSTing Data to the Server

• ارسال داده ها به سرور POSTing Data to the Server

• ارسال درخواست DELETE Sending a DELETE Request

• ارسال درخواست DELETE Sending a DELETE Request

• رفع اشکال Fixing a Bug

• رفع اشکال Fixing a Bug

• رسیدگی به خطاها به صورت محلی Handling Errors Locally

• رسیدگی به خطاها به صورت محلی Handling Errors Locally

• اضافه کردن رهگیرها برای اجرای کد در سطح جهانی Adding Interceptors to Execute Code Globally

• اضافه کردن رهگیرها برای اجرای کد در سطح جهانی Adding Interceptors to Execute Code Globally

• تنظیم یک پیکربندی جهانی پیش فرض برای Axios Setting a Default Global Configuration for Axios

• تنظیم یک پیکربندی جهانی پیش فرض برای Axios Setting a Default Global Configuration for Axios

• ایجاد و استفاده از نمونه های Axios Creating and Using Axios Instances

• ایجاد و استفاده از نمونه های Axios Creating and Using Axios Instances

• بسته شدن Wrap Up

• بسته شدن Wrap Up

پروژه برگر ساز: دسترسی به سرور Burger Builder Project: Accessing a Server

پروژه برگر ساز: دسترسی به سرور Burger Builder Project: Accessing a Server

• معرفی ماژول Module Introduction

• معرفی ماژول Module Introduction

• ایجاد پروژه Firebase Creating the Firebase Project

• ایجاد پروژه Firebase Creating the Firebase Project

• ایجاد نمونه Axios Creating the Axios Instance

• ایجاد نمونه Axios Creating the Axios Instance

• ارسال درخواست POST Sending a POST Request

• ارسال درخواست POST Sending a POST Request

• نمایش اسپینر هنگام ارسال درخواست Displaying a Spinner while Sending a Request

• نمایش اسپینر هنگام ارسال درخواست Displaying a Spinner while Sending a Request

• رسیدگی به خطاها Handling Errors

• رسیدگی به خطاها Handling Errors

• بازیابی داده ها از Backend Retrieving Data from the Backend

• بازیابی داده ها از Backend Retrieving Data from the Backend

• حذف رهگیرهای قدیمی Removing Old Interceptors

• حذف رهگیرهای قدیمی Removing Old Interceptors

احساس چند صفحه در یک برنامه تک صفحه: مسیریابی Multi-Page-Feeling in a Single-Page-App: Routing

احساس چند صفحه در یک برنامه تک صفحه: مسیریابی Multi-Page-Feeling in a Single-Page-App: Routing

• معرفی ماژول Module Introduction

• معرفی ماژول Module Introduction

• مسیریابی و آبگرم Routing and SPAs

• مسیریابی و آبگرم Routing and SPAs

• راه اندازی لینک ها Setting up Links

• راه اندازی لینک ها Setting up Links

• راه اندازی بسته روتر Setting Up the Router Package

• راه اندازی بسته روتر Setting Up the Router Package

• آماده سازی پروژه برای مسیریابی Preparing the Project for Routing

• آماده سازی پروژه برای مسیریابی Preparing the Project for Routing

• راه اندازی و ارائه مسیرها Setting Up and Rendering Routes

• راه اندازی و ارائه مسیرها Setting Up and Rendering Routes

• رندر کردن اجزای مسیرها Rendering Components for Routes

• رندر کردن اجزای مسیرها Rendering Components for Routes

• جابجایی بین صفحات Switching Between Pages

• جابجایی بین صفحات Switching Between Pages

• استفاده از پیوندها برای تغییر صفحات Using Links to Switch Pages

• استفاده از پیوندها برای تغییر صفحات Using Links to Switch Pages

• استفاده از ابزارهای مرتبط با مسیریابی Using Routing-Related Props

• استفاده از ابزارهای مرتبط با مسیریابی Using Routing-Related Props

• HOC & Route Props "withRouter". The "withRouter" HOC & Route Props

• HOC & Route Props "withRouter". The "withRouter" HOC & Route Props

• مسیرهای مطلق در مقابل نسبی Absolute vs Relative Paths

• مسیرهای مطلق در مقابل نسبی Absolute vs Relative Paths

• سبک دادن به مسیر فعال Styling the Active Route

• سبک دادن به مسیر فعال Styling the Active Route

• عبور پارامترهای مسیر Passing Route Parameters

• عبور پارامترهای مسیر Passing Route Parameters

• استخراج پارامترهای مسیر Extracting Route Parameters

• استخراج پارامترهای مسیر Extracting Route Parameters

• استفاده از سوئیچ برای بارگیری یک مسیر واحد Using Switch to Load a Single Route

• استفاده از سوئیچ برای بارگیری یک مسیر واحد Using Switch to Load a Single Route

• پیمایش به صورت برنامه ای Navigating Programmatically

• پیمایش به صورت برنامه ای Navigating Programmatically

• اطلاعات تکمیلی در مورد لینک های فعال Additional Information Regarding Active Links

• اطلاعات تکمیلی در مورد لینک های فعال Additional Information Regarding Active Links

• درک مسیرهای تودرتو Understanding Nested Routes

• درک مسیرهای تودرتو Understanding Nested Routes

• ایجاد مسیرهای تودرتو پویا Creating Dynamic Nested Routes

• ایجاد مسیرهای تودرتو پویا Creating Dynamic Nested Routes

• تغییر مسیر درخواست ها Redirecting Requests

• تغییر مسیر درخواست ها Redirecting Requests

• تغییر مسیرهای مشروط Conditional Redirects

• تغییر مسیرهای مشروط Conditional Redirects

• استفاده از History Prop برای تغییر مسیر (جایگزینی) Using the History Prop to Redirect (Replace)

• استفاده از History Prop برای تغییر مسیر (جایگزینی) Using the History Prop to Redirect (Replace)

• کار با نگهبانان Working with Guards

• کار با نگهبانان Working with Guards

• رسیدگی به پرونده 404 (مسیرهای ناشناخته) Handling the 404 Case (Unknown Routes)

• رسیدگی به پرونده 404 (مسیرهای ناشناخته) Handling the 404 Case (Unknown Routes)

• Loading Routes Lazily Loading Routes Lazily

• Loading Routes Lazily Loading Routes Lazily

• بارگیری تنبل با React Suspense (16.6) Lazy Loading with React Suspense (16.6)

• بارگیری تنبل با React Suspense (16.6) Lazy Loading with React Suspense (16.6)

• مسیریابی و استقرار سرور Routing and Server Deployment

• مسیریابی و استقرار سرور Routing and Server Deployment

• تکلیف 3: زمان تمرین - مسیریابی Assignment 3: Time to Practice - Routing

• تکلیف 3: زمان تمرین - مسیریابی Assignment 3: Time to Practice - Routing

• [اختیاری] راه حل تعیین مسیر [OPTIONAL] Routing Assignment Solution

• [اختیاری] راه حل تعیین مسیر [OPTIONAL] Routing Assignment Solution

• بسته شدن Wrap Up

• بسته شدن Wrap Up

افزودن مسیریابی به پروژه برگر ما Adding Routing to our Burger Project

افزودن مسیریابی به پروژه برگر ما Adding Routing to our Burger Project

• معرفی ماژول Module Introduction

• معرفی ماژول Module Introduction

• ساخت کانتینر پرداخت Building the Checkout Container

• ساخت کانتینر پرداخت Building the Checkout Container

• راه اندازی مسیریابی و مسیرها Setting Up Routing & Routes

• راه اندازی مسیریابی و مسیرها Setting Up Routing & Routes

• پیمایش به صفحه پرداخت Navigating to the Checkout Page

• پیمایش به صفحه پرداخت Navigating to the Checkout Page

• پیمایش برگشت و به صفحه بعدی Navigating Back & To Next Page

• پیمایش برگشت و به صفحه بعدی Navigating Back & To Next Page

• عبور مواد از طریق Query Params Passing Ingredients via Query Params

• عبور مواد از طریق Query Params Passing Ingredients via Query Params

• پیمایش به مؤلفه اطلاعات تماس Navigating to the Contact Data Component

• پیمایش به مؤلفه اطلاعات تماس Navigating to the Contact Data Component

• ارسال سفارش و ارسال داده ها بین صفحات Order Submission & Passing Data between Pages

• ارسال سفارش و ارسال داده ها بین صفحات Order Submission & Passing Data between Pages

• افزودن صفحه سفارشات Adding an Orders Page

• افزودن صفحه سفارشات Adding an Orders Page

• پیاده سازی پیوندهای ناوبری Implementing Navigation Links

• پیاده سازی پیوندهای ناوبری Implementing Navigation Links

• واکشی سفارشات Fetching Orders

• واکشی سفارشات Fetching Orders

• خروجی سفارشات Outputting the Orders

• خروجی سفارشات Outputting the Orders

• بسته شدن Wrap Up

• بسته شدن Wrap Up

فرم ها و اعتبار سنجی فرم Forms and Form Validation

فرم ها و اعتبار سنجی فرم Forms and Form Validation

• معرفی ماژول Module Introduction

• معرفی ماژول Module Introduction

• تجزیه و تحلیل برنامه Analyzing the App

• تجزیه و تحلیل برنامه Analyzing the App

• ایجاد یک مؤلفه ورودی دینامیک سفارشی Creating a Custom Dynamic Input Component

• ایجاد یک مؤلفه ورودی دینامیک سفارشی Creating a Custom Dynamic Input Component

• تنظیم یک پیکربندی JS برای فرم Setting Up a JS Config for the Form

• تنظیم یک پیکربندی JS برای فرم Setting Up a JS Config for the Form

• ایجاد دینامیک ورودی ها بر اساس پیکربندی JS Dynamically Create Inputs based on JS Config

• ایجاد دینامیک ورودی ها بر اساس پیکربندی JS Dynamically Create Inputs based on JS Config

• اضافه کردن یک کامپوننت کشویی Adding a Dropdown Component

• اضافه کردن یک کامپوننت کشویی Adding a Dropdown Component

• مدیریت ورودی کاربر Handling User Input

• مدیریت ورودی کاربر Handling User Input

• رسیدگی به ارسال فرم Handling Form Submission

• رسیدگی به ارسال فرم Handling Form Submission

• افزودن اعتبار سنجی فرم سفارشی Adding Custom Form Validation

• افزودن اعتبار سنجی فرم سفارشی Adding Custom Form Validation

• رفع یک گوچای اعتبارسنجی رایج Fixing a Common Validation Gotcha

• رفع یک گوچای اعتبارسنجی رایج Fixing a Common Validation Gotcha

• افزودن بازخورد اعتبارسنجی Adding Validation Feedback

• افزودن بازخورد اعتبارسنجی Adding Validation Feedback

• بهبود بازخورد بصری Improving Visual Feedback

• بهبود بازخورد بصری Improving Visual Feedback

• رسیدگی به اعتبار فرم کلی Handling Overall Form Validity

• رسیدگی به اعتبار فرم کلی Handling Overall Form Validity

• بسته شدن Wrap Up

• بسته شدن Wrap Up

• رفع اشکال Fixing a Bug

• رفع اشکال Fixing a Bug

Redux Redux

Redux Redux

• معرفی ماژول Module Introduction

• معرفی ماژول Module Introduction

• درک دولت Understanding State

• درک دولت Understanding State

• پیچیدگی مدیریت دولت The Complexity of Managing State

• پیچیدگی مدیریت دولت The Complexity of Managing State

• درک جریان Redux Understanding the Redux Flow

• درک جریان Redux Understanding the Redux Flow

• راه اندازی Reducer و Store Setting Up Reducer and Store

• راه اندازی Reducer و Store Setting Up Reducer and Store

• عملیات اعزام Dispatching Actions

• عملیات اعزام Dispatching Actions

• اضافه کردن اشتراک ها Adding Subscriptions

• اضافه کردن اشتراک ها Adding Subscriptions

• اتصال React به Redux Connecting React to Redux

• اتصال React به Redux Connecting React to Redux

• اتصال فروشگاه به React Connecting the Store to React

• اتصال فروشگاه به React Connecting the Store to React

• ارسال اقدامات از داخل کامپوننت Dispatching Actions from within the Component

• ارسال اقدامات از داخل کامپوننت Dispatching Actions from within the Component

• تکلیف 4: زمان تمرین - انجام اقدامات Assignment 4: Time to Practice – Dispatching actions

• تکلیف 4: زمان تمرین - انجام اقدامات Assignment 4: Time to Practice – Dispatching actions

• [اختیاری] راه حل واگذاری اقدامات [OPTIONAL] Dispatching Actions Assignment Solution

• [اختیاری] راه حل واگذاری اقدامات [OPTIONAL] Dispatching Actions Assignment Solution

• ارسال و بازیابی داده ها با Action Passing and Retrieving Data with Action

• ارسال و بازیابی داده ها با Action Passing and Retrieving Data with Action

• Switch-Case در کاهنده Switch-Case in the Reducer

• Switch-Case در کاهنده Switch-Case in the Reducer

• به روز رسانی وضعیت غیرقابل تغییر Updating State Immutably

• به روز رسانی وضعیت غیرقابل تغییر Updating State Immutably

• به روز رسانی آرایه ها به صورت غیرقابل تغییر Updating Arrays Immutably

• به روز رسانی آرایه ها به صورت غیرقابل تغییر Updating Arrays Immutably

• انواع اقدام برون سپاری Outsourcing Action Types

• انواع اقدام برون سپاری Outsourcing Action Types

• ترکیب کاهنده های متعدد Combining Multiple Reducers

• ترکیب کاهنده های متعدد Combining Multiple Reducers

• درک انواع حالت Understanding State Types

• درک انواع حالت Understanding State Types

• تکلیف 5: زمان تمرین - مبانی Redux Assignment 5: Time to Practice – Redux Basics

• تکلیف 5: زمان تمرین - مبانی Redux Assignment 5: Time to Practice – Redux Basics

• [اختیاری] راه حل تکلیف اصول اولیه Redux [OPTIONAL] Redux basics Assignment Solution

• [اختیاری] راه حل تکلیف اصول اولیه Redux [OPTIONAL] Redux basics Assignment Solution

• ترکیب Local UI State و Redux Combining Local UI State and Redux

• ترکیب Local UI State و Redux Combining Local UI State and Redux

• بسته شدن Wrap Up

• بسته شدن Wrap Up

افزودن Redux به پروژه ما Adding Redux to our Project

افزودن Redux به پروژه ما Adding Redux to our Project

• معرفی ماژول Module Introduction

• معرفی ماژول Module Introduction

• نصب Redux و React Redux Installing Redux and React Redux

• نصب Redux و React Redux Installing Redux and React Redux

• راه اندازی اولیه Redux Basic Redux Setup

• راه اندازی اولیه Redux Basic Redux Setup

• تکمیل کاهنده برای مواد Finishing the Reducer for Ingredients

• تکمیل کاهنده برای مواد Finishing the Reducer for Ingredients

• اتصال کانتینر برگر ساز به فروشگاه ما Connecting the Burger Builder Container to our Store

• اتصال کانتینر برگر ساز به فروشگاه ما Connecting the Burger Builder Container to our Store

• کار بر روی محاسبه قیمت کل Working on the Total Price Calculation

• کار بر روی محاسبه قیمت کل Working on the Total Price Calculation

• وضعیت Redux و UI Redux & UI State

• وضعیت Redux و UI Redux & UI State

• تنظیم پرداخت و اطلاعات تماس Adjusting Checkout and Contact Data

• تنظیم پرداخت و اطلاعات تماس Adjusting Checkout and Contact Data

• بسته شدن Wrap Up

• بسته شدن Wrap Up

Redux Advanced Redux Advanced

Redux Advanced Redux Advanced

• معرفی ماژول Module Introduction

• معرفی ماژول Module Introduction

• افزودن میان افزار Adding Middleware

• افزودن میان افزار Adding Middleware

• با استفاده از Redux Devtools Using the Redux Devtools

• با استفاده از Redux Devtools Using the Redux Devtools

• اجرای کد ناهمزمان: مقدمه Executing Asynchronous Code: Introduction

• اجرای کد ناهمزمان: مقدمه Executing Asynchronous Code: Introduction

• معرفی Action Creators Introducing Action Creators

• معرفی Action Creators Introducing Action Creators

• Action Creators & Async Code Action Creators & Async Code

• Action Creators & Async Code Action Creators & Async Code

• مدیریت کدهای ناهمزمان Handling Asynchronous Code

• مدیریت کدهای ناهمزمان Handling Asynchronous Code

• اقدامات بازسازی Restructuring Actions

• اقدامات بازسازی Restructuring Actions

• منطق تبدیل داده را کجا قرار دهیم؟ Where to Put Data Transforming Logic?

• منطق تبدیل داده را کجا قرار دهیم؟ Where to Put Data Transforming Logic?

• با استفاده از Action Creators و Get State Using Action Creators and Get State

• با استفاده از Action Creators و Get State Using Action Creators and Get State

• استفاده از توابع سودمند Using Utility Functions

• استفاده از توابع سودمند Using Utility Functions

• بیانیه مورد سوئیچ ناب A Leaner Switch Case Statement

• بیانیه مورد سوئیچ ناب A Leaner Switch Case Statement

• یک ساختار پوشه جایگزین An Alternative Folder Structure

• یک ساختار پوشه جایگزین An Alternative Folder Structure

• غواصی بسیار عمیق تر Diving Much Deeper

• غواصی بسیار عمیق تر Diving Much Deeper

• بسته شدن Wrap Up

• بسته شدن Wrap Up

Redux Advanced: Burger Project Redux Advanced: Burger Project

Redux Advanced: Burger Project Redux Advanced: Burger Project

• معرفی ماژول Module Introduction

• معرفی ماژول Module Introduction

• نصب Redux Devtools Installing the Redux Devtools

• نصب Redux Devtools Installing the Redux Devtools

• آماده سازی ساختار پوشه Preparing the Folder Structure

• آماده سازی ساختار پوشه Preparing the Folder Structure

• ایجاد Action Creators Creating Action Creators

• ایجاد Action Creators Creating Action Creators

• اجرای کد ناهمزمان Executing Asynchronous Code

• اجرای کد ناهمزمان Executing Asynchronous Code

• واکشی مواد به صورت ناهمزمان Fetching Ingredients Asynchronously

• واکشی مواد به صورت ناهمزمان Fetching Ingredients Asynchronously

• مقداردهی اولیه مواد در BurgerBuilder Initializing Ingredients in the BurgerBuilder

• مقداردهی اولیه مواد در BurgerBuilder Initializing Ingredients in the BurgerBuilder

• تغییر ترتیب مواد به صورت دستی Changing the Order of our Ingredients Manually

• تغییر ترتیب مواد به صورت دستی Changing the Order of our Ingredients Manually

• افزودن اقدامات سفارش Adding Order Actions

• افزودن اقدامات سفارش Adding Order Actions

• اتصال ظرف اطلاعات تماس و اقدامات Connecting Contact Data Container & Actions

• اتصال ظرف اطلاعات تماس و اقدامات Connecting Contact Data Container & Actions

• کاهش دهنده سفارش The Order Reducer

• کاهش دهنده سفارش The Order Reducer

• کار بر روی اقدامات سفارش Working on Order Actions

• کار بر روی اقدامات سفارش Working on Order Actions

• تغییر مسیر به Improve UX Redirect to Improve UX

• تغییر مسیر به Improve UX Redirect to Improve UX

• ترکیب کاهنده ها Combining Reducers

• ترکیب کاهنده ها Combining Reducers

• رسیدگی به خریدها و به روز رسانی UI Handling Purchases & Updating the UI

• رسیدگی به خریدها و به روز رسانی UI Handling Purchases & Updating the UI

• تنظیم مجدد قیمت پس از خرید Resetting the Price after Purchases

• تنظیم مجدد قیمت پس از خرید Resetting the Price after Purchases

• واکشی سفارشات (از طریق Redux) Fetching Orders (via Redux)

• واکشی سفارشات (از طریق Redux) Fetching Orders (via Redux)

• بررسی عملکردهای اجرا شده ما Checking our Implemented Functionalities

• بررسی عملکردهای اجرا شده ما Checking our Implemented Functionalities

• Refactoring Reducers Refactoring Reducers

• Refactoring Reducers Refactoring Reducers

• Refactoring Reducers ادامه دارد Refactoring Reducers Continued

• Refactoring Reducers ادامه دارد Refactoring Reducers Continued

• بسته شدن Wrap Up

• بسته شدن Wrap Up

افزودن احراز هویت به پروژه برگر ما Adding Authentication to our Burger Project

افزودن احراز هویت به پروژه برگر ما Adding Authentication to our Burger Project

• معرفی ماژول Module Introduction

• معرفی ماژول Module Introduction

• آشنایی با احراز هویت در اپلیکیشن های تک صفحه ای Understanding Authentication in Single Page Applications

• آشنایی با احراز هویت در اپلیکیشن های تک صفحه ای Understanding Authentication in Single Page Applications

• تنظیمات برنامه مورد نیاز Required App Adjustments

• تنظیمات برنامه مورد نیاز Required App Adjustments

• افزودن فرم احراز هویت Adding an Auth Form

• افزودن فرم احراز هویت Adding an Auth Form

• افزودن اکشن ها Adding Actions

• افزودن اکشن ها Adding Actions

• گرفتن توکن از Backend Getting a Token from the Backend

• گرفتن توکن از Backend Getting a Token from the Backend

• افزودن ورود به سیستم Adding Sign-In

• افزودن ورود به سیستم Adding Sign-In

• ذخیره توکن Storing the Token

• ذخیره توکن Storing the Token

• اضافه کردن اسپینر Adding a Spinner

• اضافه کردن اسپینر Adding a Spinner

• خروج کاربران Logging Users Out

• خروج کاربران Logging Users Out

• دسترسی به منابع محافظت شده Accessing Protected Resources

• دسترسی به منابع محافظت شده Accessing Protected Resources

• به روز رسانی UI بسته به وضعیت Auth Updating the UI Depending on Auth State

• به روز رسانی UI بسته به وضعیت Auth Updating the UI Depending on Auth State

• افزودن لینک خروج Adding a Logout Link

• افزودن لینک خروج Adding a Logout Link

• بازارسال کاربران احراز هویت نشده Forwarding Unauthenticated Users

• بازارسال کاربران احراز هویت نشده Forwarding Unauthenticated Users

• هدایت کاربر به صفحه پرداخت Redirecting the User to the Checkout Page

• هدایت کاربر به صفحه پرداخت Redirecting the User to the Checkout Page

• وضعیت تأیید دائمی با محل ذخیره‌سازی محلی Persistent Auth State with localStorage

• وضعیت تأیید دائمی با محل ذخیره‌سازی محلی Persistent Auth State with localStorage

• رفع خطاهای اتصال + مسیریابی Fixing Connect + Routing Errors

• رفع خطاهای اتصال + مسیریابی Fixing Connect + Routing Errors

• تضمین امنیت اپلیکیشن Ensuring App Security

• تضمین امنیت اپلیکیشن Ensuring App Security

• مسیرهای نگهبانی Guarding Routes

• مسیرهای نگهبانی Guarding Routes

• نمایش سفارشات خاص کاربر Displaying User Specific Orders

• نمایش سفارشات خاص کاربر Displaying User Specific Orders

• بسته شدن Wrap Up

• بسته شدن Wrap Up

بهبود پروژه برگر ما Improving our Burger Project

بهبود پروژه برگر ما Improving our Burger Project

• معرفی ماژول Module Introduction

• معرفی ماژول Module Introduction

• رفع تغییر مسیر به صفحه اصلی Fixing the Redirect to the Frontpage

• رفع تغییر مسیر به صفحه اصلی Fixing the Redirect to the Frontpage

• استفاده از updateObject در کل برنامه Using updateObject in the Entire App

• استفاده از updateObject در کل برنامه Using updateObject in the Entire App

• به اشتراک گذاری روش اعتبارسنجی Sharing the Validation Method

• به اشتراک گذاری روش اعتبارسنجی Sharing the Validation Method

• استفاده از متغیرهای محیطی Using Environment Variables

• استفاده از متغیرهای محیطی Using Environment Variables

• در حال حذف ()های console.log Removing console.log()s

• در حال حذف ()های console.log Removing console.log()s

• اضافه کردن Lazy Loading Adding Lazy Loading

• اضافه کردن Lazy Loading Adding Lazy Loading

• بسته شدن Wrap Up

• بسته شدن Wrap Up

آزمایش کردن Testing

آزمایش کردن Testing

• معرفی ماژول Module Introduction

• معرفی ماژول Module Introduction

• تست چیست؟ What is Testing?

• تست چیست؟ What is Testing?

• ابزارهای تست مورد نیاز Required Testing Tools

• ابزارهای تست مورد نیاز Required Testing Tools

• چه چیزی را تست کنیم؟ What To Test?

• چه چیزی را تست کنیم؟ What To Test?

• نوشتن اولین آزمون ما Writing our First Test

• نوشتن اولین آزمون ما Writing our First Test

• تست مولفه ها ادامه دارد Testing Components Continued

• تست مولفه ها ادامه دارد Testing Components Continued

• مستندات جست و آنزیم Jest and Enzyme Documentations

• مستندات جست و آنزیم Jest and Enzyme Documentations

• تست مولفه ها به درستی Testing Components Correctly

• تست مولفه ها به درستی Testing Components Correctly

• ظروف تست Testing Containers

• ظروف تست Testing Containers

• نحوه تست Redux How to Test Redux

• نحوه تست Redux How to Test Redux

• بسته شدن Wrap Up

• بسته شدن Wrap Up

استقرار برنامه در وب Deploying the App to the Web

استقرار برنامه در وب Deploying the App to the Web

• معرفی ماژول Module Introduction

• معرفی ماژول Module Introduction

• مراحل استقرار Deployment Steps

• مراحل استقرار Deployment Steps

• ساخت پروژه Building the Project

• ساخت پروژه Building the Project

• مثال: استقرار در Firebase Example: Deploying on Firebase

• مثال: استقرار در Firebase Example: Deploying on Firebase

• بسته شدن Wrap Up

• بسته شدن Wrap Up

امتیاز: کار با Webpack Bonus: Working with Webpack

امتیاز: کار با Webpack Bonus: Working with Webpack

• معرفی ماژول Module Introduction

• معرفی ماژول Module Introduction

• معرفی وب پک Introducing Webpack

• معرفی وب پک Introducing Webpack

• Webpack چگونه کار می کند How Webpack works

• Webpack چگونه کار می کند How Webpack works

• الزامات اولیه گردش کار Basic Workflow Requirements

• الزامات اولیه گردش کار Basic Workflow Requirements

• راه اندازی پروژه و npm Project & npm Setup

• راه اندازی پروژه و npm Project & npm Setup

• ایجاد یک پوشه و ساختار فایل اصلی Creating a Basic Folder & File Structure

• ایجاد یک پوشه و ساختار فایل اصلی Creating a Basic Folder & File Structure

• ایجاد اپلیکیشن Basic React Creating the Basic React Application

• ایجاد اپلیکیشن Basic React Creating the Basic React Application

• نصب وابستگی های تولید Installing Production Dependencies

• نصب وابستگی های تولید Installing Production Dependencies

• راه‌اندازی تنظیمات اولیه Webpack Setting Up the Basic Webpack Config

• راه‌اندازی تنظیمات اولیه Webpack Setting Up the Basic Webpack Config

• افزودن قوانین فایل و Babel Adding File Rules & Babel

• افزودن قوانین فایل و Babel Adding File Rules & Babel

• در حال بارگیری فایل های CSS Loading CSS Files

• در حال بارگیری فایل های CSS Loading CSS Files

• بارگذاری تصاویر و تزریق به صفحه HTML Loading Images & Injecting into HTML Page

• بارگذاری تصاویر و تزریق به صفحه HTML Loading Images & Injecting into HTML Page

• گردش کار تولید و جمع بندی Production Workflow & Wrap Up

• گردش کار تولید و جمع بندی Production Workflow & Wrap Up

پاداش: Next.js Bonus: Next.js

پاداش: Next.js Bonus: Next.js

• معرفی ماژول Module Introduction

• معرفی ماژول Module Introduction

• آشنایی با رندر سمت سرور Understanding Server Side Rendering

• آشنایی با رندر سمت سرور Understanding Server Side Rendering

• راه اندازی یک پروژه Setting up a Project

• راه اندازی یک پروژه Setting up a Project

• درک اصول Understanding the Basics

• درک اصول Understanding the Basics

• Next.js & Components & Pages Next.js & Components & Pages

• Next.js & Components & Pages Next.js & Components & Pages

• استایل کردن برنامه ما در Next.js Styling our App in Next.js

• استایل کردن برنامه ما در Next.js Styling our App in Next.js

• رسیدگی به خطاهای (404). Handling (404) Errors

• رسیدگی به خطاهای (404). Handling (404) Errors

• یک قلاب چرخه حیات خاص A Special Lifecyle Hook

• یک قلاب چرخه حیات خاص A Special Lifecyle Hook

• استقرار برنامه ما Deploying our App

• استقرار برنامه ما Deploying our App

امتیاز: انیمیشن ها در React Apps Bonus: Animations in React Apps

امتیاز: انیمیشن ها در React Apps Bonus: Animations in React Apps

• معرفی ماژول Module Introduction

• معرفی ماژول Module Introduction

• آماده سازی پروژه آزمایشی Preparing the Demo Project

• آماده سازی پروژه آزمایشی Preparing the Demo Project

• استفاده از CSS Transitions Using CSS Transitions

• استفاده از CSS Transitions Using CSS Transitions

• استفاده از انیمیشن های CSS Using CSS Animations

• استفاده از انیمیشن های CSS Using CSS Animations

• محدودیت‌های انتقال CSS و انیمیشن‌ها CSS Transition & Animations Limitations

• محدودیت‌های انتقال CSS و انیمیشن‌ها CSS Transition & Animations Limitations

• با استفاده از ReactTransitionGroup Using ReactTransitionGroup

• با استفاده از ReactTransitionGroup Using ReactTransitionGroup

• استفاده از مولفه انتقال Using the Transition Component

• استفاده از مولفه انتقال Using the Transition Component

• بسته بندی مولفه انتقال Wrapping the Transition Component

• بسته بندی مولفه انتقال Wrapping the Transition Component

• زمان بندی انیمیشن Animation Timings

• زمان بندی انیمیشن Animation Timings

• رویدادهای انتقالی Transition Events

• رویدادهای انتقالی Transition Events

• مولفه CSSTransition The CSSTransition Component

• مولفه CSSTransition The CSSTransition Component

• سفارشی کردن نام کلاس های CSS Customizing CSS Classnames

• سفارشی کردن نام کلاس های CSS Customizing CSS Classnames

• لیست های متحرک Animating Lists

• لیست های متحرک Animating Lists

• بسته های انیمیشن جایگزین Alternative Animation Packages

• بسته های انیمیشن جایگزین Alternative Animation Packages

• بسته شدن Wrap Up

• بسته شدن Wrap Up

پاداش: معرفی مختصر Redux Saga Bonus: A Brief Introduction to Redux Saga

پاداش: معرفی مختصر Redux Saga Bonus: A Brief Introduction to Redux Saga

• معرفی ماژول Module Introduction

• معرفی ماژول Module Introduction

• نصب Redux Saga Installing Redux Saga

• نصب Redux Saga Installing Redux Saga

• ایجاد اولین حماسه ما Creating our First Saga

• ایجاد اولین حماسه ما Creating our First Saga

• Hooking the Saga Up (به فروشگاه و اقدامات) Hooking the Saga Up (to the Store and Actions)

• Hooking the Saga Up (به فروشگاه و اقدامات) Hooking the Saga Up (to the Store and Actions)

• حرکت منطق از Action Creator به یک حماسه Moving Logic from the Action Creator to a Saga

• حرکت منطق از Action Creator به یک حماسه Moving Logic from the Action Creator to a Saga

• انتقال منطق بیشتر به حماسه ها Moving More Logic Into Sagas

• انتقال منطق بیشتر به حماسه ها Moving More Logic Into Sagas

• مدیریت احراز هویت با یک Saga Handling Authentication with a Saga

• مدیریت احراز هویت با یک Saga Handling Authentication with a Saga

• مدیریت ورود خودکار با Saga Handling Auto-Sign-In with a Saga

• مدیریت ورود خودکار با Saga Handling Auto-Sign-In with a Saga

• انتقال اثرات جانبی BurgerBuilder به یک حماسه Moving the BurgerBuilder Side Effects into a Saga

• انتقال اثرات جانبی BurgerBuilder به یک حماسه Moving the BurgerBuilder Side Effects into a Saga

• انتقال عوارض جانبی سفارشات به Sagas Moving the Orders Side Effects into Sagas

• انتقال عوارض جانبی سفارشات به Sagas Moving the Orders Side Effects into Sagas

• چرا حماسه می تواند مفید باشد Why Sagas can be Helpful

• چرا حماسه می تواند مفید باشد Why Sagas can be Helpful

• غواصی عمیق تر در حماسه Diving Deeper into Sagas

• غواصی عمیق تر در حماسه Diving Deeper into Sagas

React Hooks React Hooks

React Hooks React Hooks

• معرفی Introduction

• معرفی Introduction

• "React Hook" چیست؟ What are "React Hooks"?

• "React Hook" چیست؟ What are "React Hooks"?

• پروژه شروع The Starting Project

• پروژه شروع The Starting Project

• شروع کار با useState() Getting Started with useState()

• شروع کار با useState() Getting Started with useState()

• اطلاعات بیشتر در مورد useState() & State Updating More on useState() & State Updating

• اطلاعات بیشتر در مورد useState() & State Updating More on useState() & State Updating

• تخریب آرایه Array Destructuring

• تخریب آرایه Array Destructuring

• ایالت های متعدد Multiple States

• ایالت های متعدد Multiple States

• قوانین قلاب Rules of Hooks

• قوانین قلاب Rules of Hooks

• انتقال داده های حالت از طریق مؤلفه ها Passing State Data Across Components

• انتقال داده های حالت از طریق مؤلفه ها Passing State Data Across Components

• تکلیف 6: زمان تمرین - مبانی هوک Assignment 6: Time to Practice – Hooks Basics

• تکلیف 6: زمان تمرین - مبانی هوک Assignment 6: Time to Practice – Hooks Basics

• [اختیاری] راه حل تعیین قلاب [OPTIONAL] Hook Assignment Solution

• [اختیاری] راه حل تعیین قلاب [OPTIONAL] Hook Assignment Solution

• ارسال درخواست Http Sending Http Requests

• ارسال درخواست Http Sending Http Requests

• useEffect() و بارگذاری داده ها useEffect() & Loading Data

• useEffect() و بارگذاری داده ها useEffect() & Loading Data

• درک وابستگی های useEffect(). Understanding useEffect() Dependencies

• درک وابستگی های useEffect(). Understanding useEffect() Dependencies

• اطلاعات بیشتر در مورد useEffect() More on useEffect()

• اطلاعات بیشتر در مورد useEffect() More on useEffect()

• useCallback() چیست؟ What's useCallback()?

• useCallback() چیست؟ What's useCallback()?

• کار با Refs و userRef() Working with Refs & useRef()

• کار با Refs و userRef() Working with Refs & useRef()

• پاکسازی با useEffect() Cleaning Up with useEffect()

• پاکسازی با useEffect() Cleaning Up with useEffect()

• حذف مواد تشکیل دهنده Deleting Ingredients

• حذف مواد تشکیل دهنده Deleting Ingredients

• خطاهای بارگیری و دسته بندی حالت Loading Errors & State Batching

• خطاهای بارگیری و دسته بندی حالت Loading Errors & State Batching

• درک useReducer() Understanding useReducer()

• درک useReducer() Understanding useReducer()

• استفاده از useReducer() برای حالت Http Using useReducer() for the Http State

• استفاده از useReducer() برای حالت Http Using useReducer() for the Http State

• کار با useContext() Working with useContext()

• کار با useContext() Working with useContext()

• بهینه سازی عملکرد با useMemo() Performance Optimizations with useMemo()

• بهینه سازی عملکرد با useMemo() Performance Optimizations with useMemo()

• شروع کار با قلاب های سفارشی Getting Started with Custom Hooks

• شروع کار با قلاب های سفارشی Getting Started with Custom Hooks

• به اشتراک گذاری داده ها بین قلاب ها و اجزای سفارشی Sharing Data Between Custom Hooks & Components

• به اشتراک گذاری داده ها بین قلاب ها و اجزای سفارشی Sharing Data Between Custom Hooks & Components

• با استفاده از قلاب سفارشی Using the Custom Hook

• با استفاده از قلاب سفارشی Using the Custom Hook

• بسته شدن Wrap Up

• بسته شدن Wrap Up

استفاده از هوک در برگر ساز Using Hooks in the Burger Builder

استفاده از هوک در برگر ساز Using Hooks in the Burger Builder

• معرفی Introduction

• معرفی Introduction

• در حال تبدیل <برنامه> Converting <App>

• در حال تبدیل <برنامه> Converting <App>

• مسیریابی با React.lazy() Routing with React.lazy()

• مسیریابی با React.lazy() Routing with React.lazy()

• تبدیل مولفه Layout Converting the Layout Component

• تبدیل مولفه Layout Converting the Layout Component

• تبدیل با ErrorHandler HOC Converting withErrorHandler HOC

• تبدیل با ErrorHandler HOC Converting withErrorHandler HOC

• تنظیم ظروف سفارش و پرداخت Adjusting the Order & Checkout Containers

• تنظیم ظروف سفارش و پرداخت Adjusting the Order & Checkout Containers

• افزودن قلاب به ContactData Add Hooks to ContactData

• افزودن قلاب به ContactData Add Hooks to ContactData

• تبدیل کانتینر BurgerBuilder Converting the BurgerBuilder Container

• تبدیل کانتینر BurgerBuilder Converting the BurgerBuilder Container

• تنظیم مؤلفه‌های تأیید اعتبار و خروج Adjusting Auth & Logout Components

• تنظیم مؤلفه‌های تأیید اعتبار و خروج Adjusting Auth & Logout Components

• استفاده از React.memo() و بیشتر! Using React.memo() & More!

• استفاده از React.memo() و بیشتر! Using React.memo() & More!

• افزودن قلاب مدیریت خطای سفارشی Adding a Custom Error Handling Hook

• افزودن قلاب مدیریت خطای سفارشی Adding a Custom Error Handling Hook

• تنظیم وابستگی های useEffect() مناسب Setting the right useEffect() Dependencies

• تنظیم وابستگی های useEffect() مناسب Setting the right useEffect() Dependencies

• کار با useSelector() و useDispatch() Working with useSelector() and useDispatch()

• کار با useSelector() و useDispatch() Working with useSelector() and useDispatch()

• بسته شدن Wrap Up

• بسته شدن Wrap Up

امتیاز: جایگزینی Redux با React Hooks Bonus: Replacing Redux with React Hooks

امتیاز: جایگزینی Redux با React Hooks Bonus: Replacing Redux with React Hooks

• معرفی ماژول Module Introduction

• معرفی ماژول Module Introduction

• شروع پروژه و چرا باید Redux را جایگزین کنید Starting Project & Why You Would Replace Redux

• شروع پروژه و چرا باید Redux را جایگزین کنید Starting Project & Why You Would Replace Redux

• جایگزین: استفاده از Context API Alternative: Using the Context API

• جایگزین: استفاده از Context API Alternative: Using the Context API

• تغییر موارد دلخواه با Context API Toggling Favorites with the Context API

• تغییر موارد دلخواه با Context API Toggling Favorites with the Context API

• خلاصه Context API (و چرا نباید از آن به جای Redux استفاده کرد) Context API Summary (and why NOT to use it instead of Redux)

• خلاصه Context API (و چرا نباید از آن به جای Redux استفاده کرد) Context API Summary (and why NOT to use it instead of Redux)

• شروع کار با یک قلاب سفارشی به عنوان فروشگاه Getting Started with a Custom Hook as a Store

• شروع کار با یک قلاب سفارشی به عنوان فروشگاه Getting Started with a Custom Hook as a Store

• اتمام قلاب فروشگاه Finishing the Store Hook

• اتمام قلاب فروشگاه Finishing the Store Hook

• ایجاد فروشگاه بتن Creating a Concrete Store

• ایجاد فروشگاه بتن Creating a Concrete Store

• با استفاده از فروشگاه سفارشی Using the Custom Store

• با استفاده از فروشگاه سفارشی Using the Custom Store

• خلاصه فروشگاه هوک سفارشی Custom Hook Store Summary

• خلاصه فروشگاه هوک سفارشی Custom Hook Store Summary

• بهینه سازی فروشگاه هوک سفارشی Optimizing the Custom Hook Store

• بهینه سازی فروشگاه هوک سفارشی Optimizing the Custom Hook Store

• بسته شدن Wrap Up

• بسته شدن Wrap Up

امتیاز: ساخت برگر CSS Bonus: Building the Burger CSS

امتیاز: ساخت برگر CSS Bonus: Building the Burger CSS

• ساخت کد Burger CSS Building the Burger CSS Code

• ساخت کد Burger CSS Building the Burger CSS Code

مراحل بعدی و جمع بندی دوره Next Steps and Course Roundup

مراحل بعدی و جمع بندی دوره Next Steps and Course Roundup

• معرفی ماژول Module Introduction

• معرفی ماژول Module Introduction

• React Rocks! از کجا می توان نمونه های بیشتری را یافت React Rocks! Where to find more Examples

• React Rocks! از کجا می توان نمونه های بیشتری را یافت React Rocks! Where to find more Examples

• الهام بیشتر: پروژه های دنیای واقعی ساخته شده با React More Inspiration: Real-World Projects Built with React

• الهام بیشتر: پروژه های دنیای واقعی ساخته شده با React More Inspiration: Real-World Projects Built with React

• برنامه های Static React با Gatsby.js Static React Apps with Gatsby.js

• برنامه های Static React با Gatsby.js Static React Apps with Gatsby.js

• معرفی React Native Introducing React Native

• معرفی React Native Introducing React Native

• کتابخانه های مؤلفه (مثال: رابط کاربری مواد) Component Libraries (Example: Material UI)

• کتابخانه های مؤلفه (مثال: رابط کاربری مواد) Component Libraries (Example: Material UI)

• برنامه های کوچکتر با Preact Smaller Apps with Preact

• برنامه های کوچکتر با Preact Smaller Apps with Preact

• مقایسه React با Preact Comparing React with Preact

• مقایسه React با Preact Comparing React with Preact

• تبریک می گویم Congratulations

• تبریک می گویم Congratulations